import React from 'react';
import ProForm, { ModalForm, ProFormText, ProFormRadio, ProFormSwitch } from '@ant-design/pro-form';

interface OptFormProps {
  visible?: boolean;
  handleVisible: (visible: boolean) => void;
  handleAdd: (value: any) => Promise<boolean>;
  record?: any;
  actionRef?: any;
  optType?: string;
}

const OptForm: React.FC<OptFormProps> = (props) => {
  const { 
    handleVisible, 
    handleAdd, 
    actionRef, 
    record = {} 
  } = props;

  return <ModalForm
      visible
      width="50%"
      modalProps={{
        maskClosable: false
      }}
      layout="horizontal"
      title="添加/编辑退货退款原因"
      onVisibleChange={handleVisible}
      onFinish={async (value) => {
        console.log(value)
        if (value.is_use) {
          value.is_use = 'Y'
        } else {
          value.is_use = 'N'
        }
        const success = await handleAdd(value);
        if (success) {
          handleVisible(false);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }
      }}
      submitter={{
        searchConfig: {
          resetText: '取消',
          submitText: '确定'
        }
      }}
      >
      <ProForm.Group>
        <ProFormRadio.Group 
          initialValue={record.after_type || 'G'} 
          rules={
            [
              {
                required: true
              }
            ]
          }
          name="after_type"
          label="类别" 
          options={[
          {
            label: '退货',
            value: 'G'
          },
          {
            label: '退款',
            value: 'R'
          }
        ]} />
      </ProForm.Group>

      <ProForm.Group>
        <ProFormText
          rules={
            [
              {
                required: true
              }
            ]
          }
          initialValue={record.reason}
          placeholder="请输入原因"
          name="reason"
          label="原因类型"/>

        <ProFormText
          rules={
            [
              {
                required: true
              }
            ]
          }
          label="排序"
          placeholder="请输入排序"
          initialValue={record.sort}
          name="sort"/>
      </ProForm.Group>     

      <ProForm.Group>
        <ProFormSwitch
          label="是否启用"
          width="md"
          initialValue={'Y'}
          fieldProps={{
            defaultChecked: record.record_id ? record.is_use === 'Y' : true
          }}
          name="is_use"/>
      </ProForm.Group>
    </ModalForm>
}
export default OptForm;
